import  '../../../assets/css/swiper-3.4.2.min.css';
import '../../../assets/js/swiper-3.4.2.jquery.min';
import $ from 'jquery';


export default {
  name:'imgView',
  data () {
    return {
      imgUrl:"" ,
      loadClass:"center",
      imgSwitch:false,
      imgIndex:-1,
    }
  },
  props: {
    value: {
      type: Boolean,
      default: true
    },
    curIndex:{
      type: Number,
      default: -1
    },
    photoList:{
      type: Array,
      default: []
    }
  },
  mounted () {
    this.init()
  },
  //销毁实例
  deactivated(){
    this.$destroy();
  },
  filters: {
    thumbnail:function( url  , param){
      return url.replace(".png", param+".png"  ).replace(".jpg", param+".jpg"  )
    }
  },
  watch: {
    'value': function (val) {
      //点击证件图片放大
      if(val&&this.photoList.length>0){
        this.imgSwitch=true;
        this.imgIndex=this.curIndex;
        let _this=this;
        setTimeout(function(){
          //document.querySelector('.img-view').style.height = document.body.clientHeight+'px'
          var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal',
            initialSlide:_this.imgIndex,
            //scrollbar: '.swiper-scrollbar',
            pagination: '.swiper-pagination',
            paginationType: "custom",
            paginationCustomRender: function (swiper, current, total) {
              return '<span class="white-span">'+current+' / </span>' +
                '<span class="white-span">'+total+'</span>';
            }
          })
          document.querySelector('.img-view').style.opacity = 1;
        },200);
        setTimeout(function(){ $('.imagepic').each(function(index){
          if($(this).height()<$(document.body).height()){
            $(this).addClass("middleimg");
          }else{
            $(this).removeClass("middleimg");
          }
        })},500)
      }else{
        this.imgIndex=-1;
      }
    },
  },
  methods: {
    //初始化
    init(){
      if( this.$util.getQueryStringHr("title")){
        this.$util.setTitle( this.$util.getQueryStringHr("title") )
      }
    },
    imgLoad(e){
      //console.log(e)
      if(e.path[0] && (e.path[0].offsetHeight >screen.height) ){
        this.loadClass = "" ;
      }
      $('.imagepic').each(function(index){
          if($(this).height()<$(document.body).height()){
            $(this).addClass("middleimg");
          }else{
            $(this).removeClass('middleimg')
          }

      });

    },
    closeImg(){
      document.querySelector('.img-view').style.opacity=0;
      setTimeout(function(){
        this.imgSwitch=false;
        this.$emit('input', false);
      }.bind(this),250)
    },
    gestureChange(e){
      alert(JSON.stringify(e))
      console.log(e);
    }
  },
}
